<div>
  <div class="field grid m-0 border-1 surface-border border-x-none">
    <label class="col-12 mb-2 md:col-4 md:mb-0 pl-4">{{title}}</label>
    <div class="col md:col p-0">
      @switch (schema.type) {
      @case("string"){
      <app-string-form-field [group]="group"
        [groupName]="groupName"
        [control]="control"
        [schema]="schema"></app-string-form-field>
      }
      @case ("boolean") {
      <app-boolean-form-field [group]="group"
        [groupName]="groupName"
        [control]="control"
        [schema]="schema"></app-boolean-form-field>
      }
      @case ("integer") {
      <app-integer-form-field [group]="group"
        [groupName]="groupName"
        [control]="control"
        [schema]="schema"></app-integer-form-field>
      }
      @case ("number") {
      <app-number-form-field [group]="group"
        [groupName]="groupName"
        [control]="control"
        [schema]="schema"></app-number-form-field>
      }
      }
    </div>
  </div>
</div>